<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <cpn @itclick="cpnclick"></cpn>
</div>
<!--子组件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="itemClick(item)">
      {{item.name}}
    </button>
  </div>
</template>
<script>

  const cpn={
    template:'#cpn',
    data(){
      return{
        categories:[
          {id:'100',name:'热门推荐'},
          {id:'101',name:'手机数码'},
          {id:'102',name:'家用电器'},
          {id:'103',name:'电脑办公'},
        ]
      }
    },
    methods:{
      itemClick(item){
        console.log(item)
        /*
        将item传给父组件，自定义
        this.$emit('itemClick',item)
         */
        this.$emit('itemClick',item)
      }
    }
  }
  const app = new Vue({
    el: "#app",
    data:{
      message:"Hello zk I am Vue !"
    },
    components:{
      cpn
    },
    methods:{
      cpnclick(item){
        console.log('cpnclick',item);
      }
    }
  })
</script>
</body>
</html>
